<template>
  <div class="container">
    <Layout class="layout">
      <Sider class="side-bar"  :style="{height: 'calc(100vh - 35px)', background:theme==='dark'? '#515a6e':'#fff', overflow: 'auto'}" ref="side" :collapsed-width="78">
        <Menu active-name="myAddress1" accordion :theme="theme" width="auto" :open-names="['1']" @on-select="onSelect">
          <div class="user-icon">
            <h1 :class="theme==='dark'? 'checkdark':'checklight'">商城管理</h1>
              <RadioGroup v-model="theme" style="margin-top:20px ;"  :class="theme==='dark'? 'checkdark':'checklight'">
             <Radio label="light">白色   </Radio>
             <Radio label="dark">黑色</Radio>
    </RadioGroup>
          </div>
          <Submenu name="1">
            <template slot="title">
                <Icon type="ios-home" />
                <span>主页管理</span>
            </template>
            <MenuItem name="myAddress1">主页展示管理</MenuItem>
            <MenuItem name="Banner">Banner管理</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
                <Icon type="ios-cart"></Icon>
                <span>商品管理</span>
            </template>
            <MenuItem name="myShoppingCart1">学位服管理</MenuItem>
            <MenuItem name="addAddress1">商品评价管理</MenuItem>
            <MenuItem name="orderList">订单管理</MenuItem>
          </Submenu>
           <Submenu name="3">
            <template slot="title">
             <Icon type="md-person" />
                <span>用户管理</span>
            </template>
            <MenuItem name="myOrder1">用户账号管理</MenuItem>
            <MenuItem name="userfk">用户反馈管理</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout class="layout">
        <Header :style="{background: '#fff'}">
          <h2>{{activeTitle}}</h2>
        </Header>
        <Content class="content">
          <transition mode="out-in">
            <router-view></router-view>
          </transition>
        </Content>
        <Footer class="layout-footer-center">商城管理后台 &copy; Destiny</Footer>
      </Layout>
    </Layout>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      activeTitle: '主页商品展示',
      bar: {
        'myAddress1': '主页商品展示',
        'Banner': 'Banner管理',
        'addAddress1': '商品评价管理',
        'myOrder1': '用户管理',
        'myShoppingCart1': '学位服管理',
        'orderList': '订单管理',
        'userfk': '意见反馈管理'
      },
      theme: 'light'
    };
  },
  created () {
    document.title = '学士服管理系统';
  },
  methods: {
    onSelect (name) {
      this.activeTitle = this.bar[name];
      this.$router.push(`/admin/${name}`);
    }
  }
};
</script>

<style scoped>
.side-bar a{
  color: #232323;
}
.checklight{
  color: #232323;
}
.checkdark{
  color: #fff
}
.user-icon {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-img {
  margin-bottom: 15px;
  width: 96px;
  height: 96px;
  border-radius: 48px;
  overflow: hidden;
}
.user-img img{
  width: 100%;
}
.content {
  margin: 15px;
  background-color: #fff;
  padding: 15px;
}
.layout-footer-center {
  padding: 0px 15px;
  padding-bottom: 15px;
  text-align: center;
}
</style>
